<template>
  <div class="ttlockList">
    <c-title :hide="false" :text="plugin_name"></c-title>
    <van-search v-model="keyword" placeholder="请输入门店名称" @search="search_method" />
    <div class="list">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="lis_t" v-if="item.store" @click="toStore(item)">
          <div class="list_t_img">
            <img :src="item.store.thumb" alt="" />
          </div>
          <div class="list_t_name">{{ item.store.store_name }}</div>
        </div>
        <div class="line" v-if="item.lock">
          <div class="line_l">锁id:</div>
          <div class="line_r">{{ item.lock.lock_id }}</div>
        </div>
        <div class="line" v-if="item.lock">
          <div class="line_l">锁别名:</div>
          <div class="line_r">{{ item.lock.lock_alias }}</div>
        </div>
        <div class="line" v-if="item.lock">
          <div class="line_l">锁状态(是否有连接网关):</div>
          <div class="line_r">{{ item.lock.has_gateway_name }}</div>
        </div>
        <div class="lis_button">
          <div class="confirmBtn" @click="lockPassworkShow_Post(item)">获取密码</div>
        </div>
      </div>
    </div>
    <van-popup v-model="lockPassworkShow" @close="passworkClose" :close-on-click-overlay="false" round closeable position="bottom">
      <van-nav-bar title="锁密码" />
      <div class="lockPasswork">
        <van-cell title-style="text-align: left;" title="密码" :value="passwork" />
        <van-cell title-style="text-align: left;" title="到期时间" :value="expire_time" />
      </div>
    </van-popup>
    <van-popup v-model="lock_list_show" round position="bottom">
      <van-nav-bar title="选择锁">
        <template #left>
          <span @click="cancelBtn">取消</span>
        </template>
        <template #right>
          <span @click="confirmBtn">确定</span>
        </template>
      </van-nav-bar>
      <div class="tips">确认后不允许更换锁，点击确定前请先确认好</div>
      <div class="lis_arr" :class="{ md: setLock_id == item.id }" v-for="item in lock_list" :key="item.id" @click="selectO(item)">
        <div class="line">
          <div class="line_l">锁id:</div>
          <div class="line_r">{{ item.lock_id }}</div>
        </div>
        <div class="line">
          <div class="line_l">锁别名:</div>
          <div class="line_r">{{ item.lock_alias }}</div>
        </div>
        <div class="line">
          <div class="line_l">锁状态(是否有连接网关):</div>
          <div class="line_r">{{ item.has_gateway_name }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      keyword: "",
      lockPassworkShow: false,
      list: [],
      lock_list_show: false,
      lock_list: [],
      setLock_id: null,
      record_id: null,
      passwork: "",
      expire_time: "",
      plugin_name: "通通锁",

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    toStore(item) {
      let store_id = item.store.id;
      this.$router.push(this.fun.getUrl("HomeSeller", { store_id: store_id }));
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.list = [];
    },
    search_method() {
      this.init();
      this.getData();
    },
    cancelBtn() {
      this.lock_list_show = false;
      this.lock_list = [];
      this.setLock_id = null;
      this.record_id = null;
    },
    async confirmBtn() {
      if (!this.setLock_id) {
        this.$toast("请选择锁");
        return;
      }
      this.getPassworkPost();
    },
    passworkClose() {
      this.lockPassworkShow = false;
      this.record_id = null;
      if (this.setLock_id) {
        this.init();
        this.getData();
        return;
      }
    },
    async getPassworkPost() {
      let json = {
        record_id: this.record_id
      };
      if (this.setLock_id) {
        json.lock_id = this.setLock_id;
      }
      let { data, msg, result } = await $http.post("plugin.ttlock.frontend.controllers.lock.index.get-lock-password", json, "");
      if (result) {
        this.lock_list_show = false;
        this.lockPassworkShow = true;
        this.passwork = data.password;
        this.expire_time = data.expire_time;
        this.posterImg = null;
      } else {
        this.$toast(msg);
      }
    },
    selectO(item) {
      this.setLock_id = item.id;
    },
    async lockPassworkShow_Post(item) {
      this.record_id = item.id;
      if (!item.lock) {
        this.lock_list = item.lock_list;
        this.lock_list_show = true;
        return;
      }
      this.getPassworkPost();
    },
    async getData() {
      let json = {
        search: {
          store_name: this.keyword
        }
      };
      let { data, msg, result } = await $http.post("plugin.ttlock.frontend.controllers.lock.index", json, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
        let plugin_setting = localStorage.getItem("plugin_setting") ? JSON.parse(localStorage.getItem("plugin_setting")) : "";
        this.plugin_name = plugin_setting?.ttlock.plugin_name;
        this.fun.setWXTitle(this.plugin_name);
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          search: {
            store_name: this.keyword
          },
          page: this.page
        };
        let { data, result } = await $http.post("plugin.ttlock.frontend.controllers.lock.index", json, "");
        if (result) {
          this.list = this.list.concat(data.data);
          this.isLoadMore = true;
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ttlockList {
  padding-bottom: 2rem;
}
.tips {
  color: #ef5452;
  text-align: left;
  margin: 0.5rem 0.63rem;
}

.lis_arr {
  margin: 0 0.63rem;
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  border: 1.0016px solid rgba(187, 187, 187, 0.46);
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  .line {
    display: flex;
    align-items: center;
    color: rgba(16, 16, 16, 0.68);
    margin-top: 0.75rem;
    .line_l {
      flex-shrink: 0;
      margin-right: 0.35rem;
    }
  }
}
.md {
  border: 1.0016px solid #ef5452;
}
.lockPasswork {
  padding: 0 0.75rem;
  box-sizing: border-box;
  padding-bottom: 2rem;
}
.list {
  margin: 0.75rem;

  .lis {
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    background: #fff;
    margin-bottom: 0.5rem;
    .lis_button {
      display: flex;
      justify-content: flex-end;
      margin-top: 0.75rem;
      .confirmBtn {
        padding: 0.35rem 0.81rem;
        border-radius: 1.5rem;
        color: #fff;
        background: #ef5452;
      }
    }
    .line {
      display: flex;
      align-items: center;
      color: rgba(16, 16, 16, 0.68);
      margin-top: 0.75rem;
      .line_l {
        flex-shrink: 0;
        margin-right: 0.35rem;
      }
    }
    .lis_t {
      display: flex;
      align-items: center;
      .list_t_name {
        font-size: 1rem;
        font-weight: bold;
      }
      .list_t_img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin-right: 0.3rem;
        background: #000;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
